Tamplate語法

指令 Directives

指令是帶有 v- 前綴的特殊屬性。Vue 提供了許多內置指令，包括上面我們所介紹的 v-bind 和 v-html。

指令屬性的期望值為一個 JavaScript 表達式 (除了少數幾個例外v-for、v-on 和 v-slot)。一個指令的任務是在其表達式的值變化時響應式地更新 DOM。

參數 Arguments

某些指令會需要一個“參數”，在指令名後通過一個冒號隔開做標識。例如用 v-bind 指令來響應式地更新一個 HTML 屬性：

<a v-bind:href="url"> ... </a>

<!-- 簡寫 -->
<a :href="url"> ... </a>

這裡 href 就是一個參數，它告訴 v-bind 指令將表達式 url 的值綁定到元素的 href 屬性上。在簡寫中，參數前的一切 (例如 v-bind:) 都會被縮略為一個 : 字符。

動態參數

同樣在指令參數上也可以使用一個 JavaScript 表達式，需要包含在一對方括號內：

<!--
注意，參數表達式有一些約束，
參見下面“動態參數值的限制”與“動態參數語法的限制”章節的解釋
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>

這裡的 attributeName 會作為一個 JavaScript 表達式被動態執行，計算得到的值會被用作最終的參數。舉例來說，如果你的組件實例有一個數據屬性 attributeName，其值為 "href"，那麼這個綁定就等同於 v-bind:href。

你還可以將一個函數綁定到動態的事件名稱上：

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 簡寫 -->
<a @[eventName]="doSomething"> ... </a>

動態參數值的限制

動態參數中表達式的值應當是一個字符串，或者是 null。特殊值 null 意為顯式移除該綁定。其他非字符串的值會觸發警告。

動態參數語法的限制

動態參數表達式因為某些字符的緣故有一些語法限制，例如空格和引號，在 HTML 屬性名稱中都是不合法的。例如下面的示例：

<!-- 這會觸發一個編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>

當使用 DOM 內嵌模板 (直接寫在 HTML 文件裡的模板) 時，我們需要避免在名稱中使用大寫字母，因為瀏覽器會強制將其轉換為小寫：

<a :[someAttr]="value"> ... </a>

修飾符 Modifiers

修飾符是以點開頭的特殊後綴，表明指令需要以一些特殊的方式被綁定。例如 .prevent 修飾符會告知 v-on 指令對觸發的事件調用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>